<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/js/jquery-easyui-1.4.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/js/jquery-easyui-1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/js/jquery-easyui-1.4.2/themes/color.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/js/jquery-easyui-1.4.2/themes/jq_easyui_demo.css">
    <script type="text/javascript" src="<%=basePath%>/js/jquery-easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>

<title>设备在线管理系统</title>

      <script>
		function getData(){
			//alert("getData");
			var rows = [];
 		 $.ajax({  
			       url:'<%=basePath%>/get_all_devinfo',  
			       type: "get",  
			       async: false,  
			       dataType: "json",  
			       success: function(data) {  
			       // alert(data); 
			        for(var i=0;i<data.length;i++){
			        	//alert(data[i].dev_SN);
			        	rows.push({
							id: data[i].id,
							SN: data[i].dev_SN,
							Statue: data[i].dev_Statue,
							IP: data[i].dev_IP,
							Port: data[i].dev_Port,
							MAC: data[i].dev_MAC,
							Version: data[i].dev_Version,
							Upload:data[i].Upload
						});
			        }
			       },  
			       error: function(){alert('Error');}  
		}); 
			
			return rows;
		}
		
		function pagerFilter(data){
			//alert("pagerFilter");
			if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
				data = {
					total: data.length,
					rows: data
				}
			}
			var dg = $(this);
			var opts = dg.datagrid('options');
			var pager = dg.datagrid('getPager');
			pager.pagination({
				onSelectPage:function(pageNum, pageSize){
					//alert("onSelectPage");
					opts.pageNumber = pageNum;
					opts.pageSize = pageSize;
					pager.pagination('refresh',{
						pageNumber:pageNum,
						pageSize:pageSize
					});
					dg.datagrid('loadData',data);
				}
			});
			
			if (!data.originalRows){
				data.originalRows = (data.rows);
			}
			var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
			var end = start + parseInt(opts.pageSize);
			data.rows = (data.originalRows.slice(start, end));
			return data;
		}
		
		$(function(){
			//alert("$");
			$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
		});
	</script>
    <style>
		body{TEXT-ALIGN: center;}
		
		#center{ 
		MARGIN-RIGHT: auto;
		MARGIN-LEFT: auto;
		vertical-align:middle;
		}
		
		#table_center{ 
		MARGIN-RIGHT: auto;
		MARGIN-LEFT: auto;
		vertical-align:middle;
		width:1024px;
		height:500px;
		}
		
  </style>
</head>
<body>
	<div id="center" > <h2>D+快检生态平台设备在线管理系统</h2></div>
	<br/><br/><br/>
    <div style="margin:20px 0 10px 0;"></div>
    <div class="easyui-tabs" id="table_center">
		
        <div title="设备状态" style="padding:10px">
           	<table id="dg" style="width:1000px;height:400px" data-options="
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:false,
				pagination:true,
				pageSize:10"
			>
		<thead>
			<tr>
				<th field="id" width="80" align="center">id</th>
				<th field="SN" width="100" align="center">SN</th>
				<th field="Statue" width="80" align="center">Statue</th>
				<th field="IP" width="100" align="center">IP</th>
				<th field="Port" width="80" align="center">Port</th>
				<th field="MAC" width="150" align="center">MAC</th>
				<th field="Version" width="110" align="center">Version</th>
				<th field="Upload" width="110"  align="center">Upload</th>
			</tr>
		</thead>
	</table>
        </div>

        <div title="设备参数设置" style="padding:10px">
            <ul class="easyui-tree" data-options="method:'get',animate:true"></ul>
        </div>
        
        <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
           如需帮助，请找讯动网络科技有限公司！
        </div>
    </div>
</body>
</html>